<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="200px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="##" target="_blank">
       <img src="./assets/imgs/logo.svg" alt="logo">
        <h1>后台管理系统</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="Dashboard" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/sys/welcome">Welcome</a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzOpen nzTitle="系统管理" nzIcon="setting">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/sys/user">用户管理</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/sys/role">角色管理</a>role·
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/sys/dept">部门管理</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

        <span style="float: right; margin-right: 16px;">
          <a nz-dropdown [nzDropdownMenu]="menu">
           用户<i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item>个人信息</li>
              <li nz-menu-item>安全退出</li>
            </ul>
          </nz-dropdown-menu>
        </span>
      </div>
    </nz-header>

    <nz-tabset [nzType]="'card'"
               [nzTabPosition]="nzTabPosition"
               [(nzSelectedIndex)]="selectedIndex"
               (nzSelectChange)="selectChange([$event])"
    >


      <nz-tab
        *ngFor="let tab of tabs"
        [nzTitle]="titleTemplate"
      >
        <ng-template  #titleTemplate>
          <div>
            {{ tab.name }}
            <i *ngIf="tab.closeIcon" nz-icon nzType="close" (click)="closeTab(tab)" class="ant-tabs-close-x"></i>
          </div>
        </ng-template>
      </nz-tab>
    </nz-tabset>

    <nz-content nz-row>


      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
